<template>
  <div
    class="right"
    @drop.stop.prevent="handleDrop"
    @dragover.stop.prevent="handleDragover"
    @dragenter.stop.prevent="handleDragenter"
  >
    <i class="el-icon-upload"></i>
    <div>将文件拖拽到此处</div>
  </div>
</template>

<script setup>
import { ElMessage } from 'element-plus'
import { ref, defineProps } from 'vue'
import XLSX from 'xlsx'
import { getHeaderRow, isExcel, formatDateByKey } from './utils'
const loading = ref(false)
const props = defineProps({
  beforeUpload: {
    type: Function
  },
  onSuccess: {
    type: Function
  }
})

const handleDrop = (e) => {
  // e.dataTransfer是存放用户拖拽的数据的容器
  const files = e.dataTransfer.files
  if (files.length <= 0) {
    return ElMessage.warning('上传的文件至少要有一条')
  }
  const file = files[0]
  if (!isExcel(file)) {
    return ElMessage.warning('上传的文件必须以xlsx、xls、csv结尾')
  }
  // 如果没有指定上传前的回调的话，直接调用读取文件操作
  if (!props.beforeUpload) {
    readFileFn(file)
    return false
  }
  // 如果指定了上传前的回调的话，只有返回true时才调用读取文件操作
  const flag = props.beforeUpload(file)
  if (flag) {
    readFileFn(file)
  }
}

const handleDragover = (e) => {
  // mdn https://developer.mozilla.org/zh-CN/docs/Web/API/DataTransfer/dropEffect
  e.dataTransfer.dropEffect = 'copy'
}
const handleDragenter = () => {}

// 读取文件
const readFileFn = (file) => {
  return new Promise((resolve, reject) => {
    loading.value = true
    const render = new FileReader()
    render.onload = (e) => {
      // 1、获取解析后的数据
      const data = e.target.result
      // 2、利用XLSX对数据进行解析
      const workbook = XLSX.read(data, { type: 'array' })
      // 3、获取第一张表格（工作簿）名称
      const firstSheetName = workbook.SheetNames[0]
      // 4、读取sheet1（第一张表格的数据
      const workSheet = workbook.Sheets[firstSheetName]
      // 5、解析数据表头
      const header = getHeaderRow(workSheet)
      // 6、解析数据体
      const results = XLSX.utils.sheet_to_json(workSheet)
      // 7、传入解析之后的数据
      generateData({ header, results: formatDateByKey(results, '开通时间') })
      // 8、处理loading
      loading.value = false
      // 9、成功回调
      resolve()
    }
    render.readAsArrayBuffer(file)
  })
}

// 导入内容生成数据
const generateData = (excelData) => {
  props.onSuccess && props.onSuccess(excelData)
}
</script>

<style lang="scss" scoped>
.right {
  flex: 1;
  max-width: 500px;
  @include flex-center;
  flex-direction: column;
  border: 2px dotted #ddd;
  border-radius: 6px;
  i {
    font-size: 60px;
    color: $menuBg;
  }
}
</style>
